<template>
  <div class="info">
    <div class="subtitle">
      <el-row :gutter="4" type="flex" justify="start">
        <el-col :span="22">
          <el-select v-model="value" style="width:150px;" @change="handleFilter">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-radio-group v-model="radio" size="medium" @change="handleFilter">
            <el-radio-button label="thisMonth">本月</el-radio-button>
            <el-radio-button label="lastMonth">上个月</el-radio-button>
            <el-radio-button label="nearlyThreeMonths">近三个月</el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="|"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:300px;"
            @change="handleFilter"
          />
        </el-col>
        <el-col :span="2">
          <el-button type="primary" style="float:right;margin-top:15px;margin-right:15px;" @click="handleFilter">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <el-tabs v-model="activeName" class="subMain">
      <el-tab-pane label="趋势" name="1">
        <div class="firstTitle">
          总数:
          <span style="color:#1bb974">{{ total }}</span> 个
        </div>
        <div class="chart-container">
          <chart :date-array="dateArray" :data-array="dataArray" :key="key" height="100%" width="100%" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="明细" name="2">
        <div class="table-container">
          <sub-table
            :table-label="value === 'newRegisterUser' ? newRegisterUserLabel : value === 'newCourseNumber' ? newCourseNumberLabel : value === 'newLearnNumber' ? newLearnNumberLabel : newClassBoughtNumberLabel"
            :table-data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
          />
          <pagination
            :total="total"
            :current-page="currentpage"
            :page-size="pagesize"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 分页组件
import Chart from '@/components/Charts/lineMarker'
import subTable from '@/components/Eltable'
import { getTenantId } from '@/utils/auth'
import { getOperateStatistics } from '@/api/operate/operateStatistics'
export default {
  components: {
    Chart,
    subTable,
    Pagination
  },
  data() {
    return {
      activeName: '1',
      value: 'newRegisterUser',
      date: [],
      radio: 'thisMonth',
      total: 0,
      currentpage: 1,
      pagesize: 10,
      dateArray: [],
      dataArray: [],
      tableData: [],
      key: 0,
      newRegisterUserLabel: [
        {
          label: '用户名', width: '', prop: 'nickName'
        }, {
          label: '姓名', width: '', prop: 'name'
        }, {
          label: '手机号', width: '', prop: 'verifiedMobile'
        }, {
          label: '注册邮箱', width: '', prop: 'email'
        }, {
          label: '注册时间', width: '', prop: 'createTimeStr'
        }
      ],
      newCourseNumberLabel: [
        {
          label: '课程标题', width: '', prop: 'title'
        }, {
          label: '课程价格', width: '', prop: 'price'
        }, {
          label: '课时数', width: '', prop: 'lessonNum'
        }, {
          label: '排行分数', width: '', prop: 'rating'
        }, {
          label: '创建时间', width: '', prop: 'createTimeStr'
        }
      ],
      newLearnNumberLabel: [
        {
          label: '标题', width: '', prop: 'title'
        }, {
          label: '加入课程', width: '', prop: 'courseName'
        }, {
          label: '加入者', width: '', prop: 'userName'
        }, {
          label: '加入时间', width: '', prop: 'createTimeStr'
        }
      ],
      newClassBoughtNumberLabel: [
        {
          label: '标题', width: '', prop: 'title'
        }, {
          label: '加入班级', width: '', prop: 'className'
        }, {
          label: '加入者', width: '', prop: 'userName'
        }, {
          label: '加入时间', width: '', prop: 'createTimeStr'
        }
      ],
      options: [
        {
          value: 'newRegisterUser',
          label: '新注册用户数'
        },
        {
          value: 'newCourseNumber',
          label: '新增课程数'
        },
        {
          value: 'newLearnNumber',
          label: '加入学习数'
        },
        {
          value: 'newClassBoughtNumber',
          label: '购买班级数'
        }
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      const params = {}
      params.page = this.currentpage
      params.pageSize = this.pageSize
      params.type = this.value
      if (this.date) {
        params.startDate = this.date[0]
        params.endDate = this.date[1]
      }
      params.timeType = this.radio
      params.tenantId = getTenantId()
      getOperateStatistics(params).then(res => {
        this.tableData = res.data.tableData
        this.total = res.data.tableData.length
        this.dateArray = res.data.dateArray
        this.dataArray = res.data.dataArray
        this.key++
      })
    },
    handleFilter() {
      this.getData()
    },
    handleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.info {
  width: 100%;
  padding: 0;
  .subtitle {
    width: 100%;
    height: 70px;
    background-color: #e6e9ed;
    line-height: 70px;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .subMain {
    padding: 20px 20px;
    .el-tabs__item {
      font-size: 20px;
    }
    .firstTitle {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background-color: #f8f8f8;
      padding-left: 10px;
    }
    #canvas {
      width: 1200px;
      height: 500px;
      margin: auto;
      background-color: #8a8a8a;
      margin-top: 50px;
    }
    .chart-container {
      position: relative;
      width: 1000px;
      height: 400px;
      margin: auto;
    }
  }
}
</style>
